@import "@/sass/base.scss";
@mixin setAnimate($property:all, $duration:1s, $timing-function:ease-in, $delay:0) {
    transition-property: $property;
    transition-duration: $duration;
    transition-time-function: $timing-function;
    transition-delay: $delay;
}
@mixin block($width: 50px, $height:50px, $lineHeight:50px) {
    display: block;
    width: $width;
    height: $height;
    line-height: $lineHeight;
    text-align: center;
}
@mixin setBlock($width: 50px, $height:50px, $lineHeight:normal) {
    width: $width;
    height: $height;
    line-height: $lineHeight;
}
@mixin positionCenter($supportTransform:true) {
    position: absolute;
    left: 50%;
    top: 50%; //     @if $supportTransform {
    // 　　　　transform: translate(-50%,-50%);
    // 　　}
}

body,
html {
    height: 100%;
    /*解决ios上滑动不流畅*/
    -webkit-overflow-scrolling: touch;
}
$baseColor: #333333;
$baseColor2: #469aeb; // ::-webkit-scrollbar {
//     width: 0;
//     height: 0;
//     display: none;
// }

 // 滚动条定义
 ::-webkit-scrollbar {
     width: 4px;
     height: 6px;
     // background-color: #f00;
 }
 /*定义滚动条轨道 内阴影+圆角*/
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(250, 248, 248, 0.3);
     border-radius: 10px;
     // background-color: #fff;
 }
 /*定义滑块 内阴影+圆角*/
 ::-webkit-scrollbar-thumb {
     border-radius: 6px;
     -webkit-box-shadow: inset 0 0 6px rgba(253, 249, 249, 0.3);
     background-color: #ccc;
 }

.app {
    min-width: 1024px;
    height: 100%;
    // font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    color: $baseColor;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // height: 100%;
    .layout {
        overflow: auto;
        height: 100%;

        .container {
            padding-top: 15px;
            width: 100%;

            .breadBar {
                margin-bottom: 20px;
                padding-bottom: 5px;
                border-bottom: 1px solid #e1e1e1;

                span {
                    position: relative;
                    margin-right: 15px;
                    padding-bottom: 5px;
                    border-bottom: 2px solid #1fc37e;
                    font-weight: bold;
                    font-size: 14px;

                    &:after {
                        content: ' ';
                        position: absolute;
                        top: 50%;
                        right: -10px;
                        height: 70%;
                        transform: translate(0,-50%);
                        border-right: 1px solid #ccc;
                        vertical-align: middle;
                    }
                }
            }

            .searchBox {
                display: flex;
                margin-bottom: 20px;

                .item {
                    margin: 0 5px;

                    &.searchInput {
                        width: 250px;
                    }
                }
            }
            .actionBox{
                margin-bottom: 10px;
                display: flex;
            }

            .commonTable {
                // border-radius: 10px;
                box-shadow: 0 2px 4px #ddd;

                thead {
                    .el-checkbox {
                        margin-left: 4px;
                    }
                }

                .el-table__row {
                    &.table_checked {
                        .el-table-column--selection {
                            &:before {
                                opacity: 1;
                            }
                        }
                    }

                    .el-table-column--selection {
                        position: relative;

                        &:before {
                            opacity: 0;
                            content: ' ';
                            position: absolute;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            width: 5px;
                            background: #1fc37e;
                            border-radius: 0 10px 10px 0;
                            transition: all 0.25s ease-in;
                        }
                    }
                }
            }

            .pagerBox {
                margin-top: 20px;
                text-align: right;

                .pager {
                    display: inline-block;
                    padding: 5px 20px;
                    // border-radius: 10px;
                    background: #fff;
                    box-shadow: 0 1px 2px #ccc;
                    // .btn-prev,.btn-next,.more{
                    //     background: none;
                    // }
                    .number {
                        border-radius: 20px;

                        &.active {
                            background: #1fc37e;
                            color: #fff;
                        }
                    }
                }
            }

            .el-dialog__body{
                .el-form{
                    .el-form-item__content{
                        padding-right: 5px;
                    }
                    .el-date-editor.el-input{
                        width: 100%;
                    }
                    .el-select{
                        width: 100%;
                    }
                }

                .editableTable{
                    .el-input-number{
                        width: 100%;
                    }
                }
            }
        }
    }
    // a {
    //     cursor: pointer;
    //     text-decoration: none;
    //     color: $baseColor;
    //
    //     &:active {
    //         color: #395c80;
    //         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    //     }
    // }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s;
    }
    /* .fade-leave-active in below version 2.1.8 */
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .textOverflow {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
